<!DOCTYPE html>
<html lang="en" class="mobile portrait">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link rel="shortcut icon" href="../favicon.ico">
    <title>松下小家电兑奖平台</title>

    <link rel="stylesheet" href="../assets/js/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../assets/css/portal.css">
    <link rel="stylesheet" href="../assets/css/portal-animate.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/weui.min.css">

    <style type="text/css" media="screen">
        #card-prize {
            /*background-image: url(../assets/image/cards/card-prize-national.jpg);*/
            /*background-image: url(../assets/image/cards/card-prize-xmas.jpg);*/
            /*background-image: url(../assets/image/cards/card-prize-spring2017.jpg);*/
            background-image: url(../assets/image/cards/card-prize-may2017.jpg);
        }
        
        #card-query {
            /*background-image: url(../assets/image/cards/card-query-national.jpg);*/
            /*background-image: url(../assets/image/cards/card-query-xmas.jpg);*/
            background-image: url(../assets/image/cards/card-query-may2017.jpg);
        }
        
        .section-top-right {
            position: absolute;
            color: #ffffff;
            z-index: 3;
            top: 10px;
            right: 10px;
        }
        
        .section-top-right img {
            width: 35px;
        }
        
        .on {
            content: url(../assets/image/portal/on.png);
        }
        
        .off {
            content: url(../assets/image/portal/off.png);
        }
        
        .section-content {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .section-bottom {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        
        body {
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            font-family: "proxima-nova-soft", sans-serif;
            user-select: none;
            -webkit-user-select: none;
            overflow: hidden;
        }
        
        body .vertical-centered-box {
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
        }
        
        body .vertical-centered-box:after {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            margin-right: -0.25em;
        }
        
        * {
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }
        
        #particles-background,
        #particles-foreground {
            left: -51%;
            top: -51%;
            width: 202%;
            height: 202%;
            -webkit-transform: scale3d(0.5, 0.5, 1);
            -moz-transform: scale3d(0.5, 0.5, 1);
            -ms-transform: scale3d(0.5, 0.5, 1);
            -o-transform: scale3d(0.5, 0.5, 1);
            transform: scale3d(0.5, 0.5, 1);
        }
        
        #particles-background {
            background: #2c2d44;
            background-image: -moz-linear-gradient(45deg, #3f3251 2%, #002025 100%);
            background-image: -webkit-linear-gradient(45deg, #3f3251 2%, #002025 100%);
            background-image: linear-gradient(45deg, #3f3251 2%, #002025 100%);
        }
        
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        
        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        
        .loading {
            border-radius: 50%;
            margin: 0 auto;
            margin-top: 38.2%;
            width: 60px;
            height: 60px;
            border: 0.25rem solid rgba(255, 255, 255, 0.2);
            border-top-color: white;
            -webkit-animation: spin 1s infinite linear;
            animation: spin 1s infinite linear;
        }
        
        .myloader {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 99;
        }
    </style>

</head>

<body>
    <div class="myloader">
        <div id="particles-background" class="vertical-centered-box"></div>
        <div id="particles-foreground" class="vertical-centered-box"></div>

        <div class="loading"></div>

        <div class="txt-3">
            <!-- <p>松下电器</p> -->
            <p>百年传承，智美未来</p>
            <p>© Panasonic Corporation of China
                <script>
                    document.write((new Date()).getFullYear());
                </script>
            </p>
        </div>
    </div>

    <div class="section-top-right">
        <img id="music-icon" class="on">
        <audio src="../assets/music/bg-music.mp3" autoplay="0" loop='loop'></audio>
    </div>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <!-- 第一个 slide -->
                <img class="section-content" src="../assets/image/portal/avatar.jpg">
                <img class="section-bottom" src="../assets/image/portal/product-row.png">
                <span class="sprite_global"></span>
            </div>

            <div class="swiper-slide">
                <!-- 第二个 slide -->
                <div class="wrapper">
                    <!-- 三张活动卡片 -->
                    <div id="card-prize" class="card-common card-shadow swiper-lazy"></div>
                    <div id="card-query" class="card-common card-shadow swiper-lazy"></div>
                </div>

                <div class="weui_dialog_alert" id="iosDialog" style="display: none;">
                    <div class="weui-mask"></div>
                    <div class="weui-dialog" style="top:50%">
                        <div class="weui-dialog__bd">很抱歉，本次活动已结束</div>
                        <div class="weui-dialog__ft">
                            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../assets/js/portal/Particleground.js" type="text/javascript"></script>
    <script src="../assets/js/lottery/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="../assets/js/swiper/js/swiper.min.min.js" type="text/javascript"></script>
    <script src="../assets/js/swiper/js/swiper.jquery.min.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            //	初始化滑屏插件
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'vertical',
                loop: false,
                onSlideChangeEnd: function(mySwiper) {
                    if (mySwiper.activeIndex == 1) {
                        $(".myloader").remove();

                        mySwiper.removeSlide(0);
                    }
                }
            });

            $(".myloader").fadeOut(3000, "linear");
            $('audio').get(0).play();
        });

        // 设定卡片点击的跳转地址
        // var url_for_card_selfie = "/pana-may/self-activity";
        var url_for_card_prize = "/pana-campaigns/pages/campaigns/prize-cashing/2017-04-21/home.html";
        var url_for_card_query_mayday_2017 = "/pana-campaigns/pages/campaigns/query-mayday-2017.html";

        function goto(element, newLocation) {
            $(element).click(function() {
                window.location = newLocation;
                return false;
            });
        }

        function setOffline(element) {
            $(".weui-dialog__btn").click(function() {
                $('#iosDialog').fadeOut(200);
            });

            $(element).click(function() {
                $('#iosDialog').fadeIn(200);
            });
        }

        setOffline("#card-prize");
        // goto("#card-prize", url_for_card_prize);

        // goto("#card-selfie", url_for_card_selfie);
        //	goto("#card-selfie", url_for_card_query_xmas_2016);

        goto("#card-query", url_for_card_query_mayday_2017);

        $("#music-icon").on('click', function() {
            if ($(this).hasClass('on')) {
                $('audio').get(0).pause();
                $(this).removeClass('on');
                $(this).addClass('off');
            } else {
                $('audio').get(0).play();
                $(this).removeClass('off');
                $(this).addClass('on');
            }
        });
    </script>

</body>

</html>